<template>
  <div ref="scrolly-wrapper" class="scrolly-wrapper">
    <div>
      <div ref="scrollx-wrapper">
        <div class="expect" :style="'width:'+itemsWidth+'px'">
          <MostExpectItem v-for="item in expect.coming" :position="item" :key="item.id"></MostExpectItem>
        </div>
      </div>

      <div>

        <div v-for="(items,name) in cominglistByDay" :key="name">
          <h4>{{name}}</h4>
          <ComingItem v-for="item in items" :key="item.id" :item="item"></ComingItem>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import MostExpectItem from "./mostExpectItem"
import ComingItem from "./comingItem"
import { mostExpect, comingList, moreComingList } from "@/api/movie"
import BScroll from "@better-scroll/core"
import { Indicator, Toast } from "mint-ui"
import Pullup from "@better-scroll/pull-up"
BScroll.use(Pullup)

export default {
  data() {
    return {
      itemsWidth: 0,
      //最受期待
      expect: {
        offset: 0,
        limit: 10,
        coming: [],
        paging: {}
      },
      //即将上映列表
      cominglist: {
        reachEnd: false,
        start: 0,
        ci: 1,
        limit: 10,
        coming: [],
        movieIds: []
      }
    }
  },
  computed: {
    // obj={
    //   "2020-04-9":[{},{}],
    //    "2020-04-8":[{},{}]
    // }
    cominglistByDay() {
      let result = {}
      this.cominglist.coming.forEach(item => {
        if (!result[item.comingTitle]) {
          result[item.comingTitle] = [item]
        } else {
          result[item.comingTitle].push(item)
        }
      })
      return result
    }
  },
  components: {
    MostExpectItem,
    ComingItem
  },
  async created() {
    this.getMostExpect()
    let rs = await comingList({
      ci: this.cominglist.ci,
      token: "",
      limit: this.cominglist.limit
    })
    Object.assign(this.cominglist, rs.data)
    this.$nextTick(() => {
      this.initScroll()
    })
  },

  methods: {
    /**
     * 获取最期待的数据
     */
    async getMostExpect() {
      let rs = await mostExpect({
        ci: 151,
        limit: this.expect.limit,
        offset: this.expect.offset,
        token: ""
      })
      this.expect.coming.push(...rs.data.coming)
      this.expect.paging = rs.data.paging
      this.itemsWidth = this.expect.coming.length * 100
    },

    /**
     * 初始化滚动条
     */
    initScroll() {
      this.scrollX = new BScroll(this.$refs["scrollx-wrapper"], {
        scrollX: true,
        probeType: 3
      })

      this.scrollX.on("scrollEnd", async position => {
        if (!this.expect.paging.hasMore) {
          Toast({
            message: "没有更多的数据了",
            position: "bottom",
            duration: 3000
          })
          return
        }

        if (this.scrollX.maxScrollX === position.x) {
          await this.getMostExpect()
          this.$nextTick(() => {
            this.expect.offset += this.expect.limit
            this.scrollX.refresh()
          })
        }
      })

      this.scrollY = new BScroll(this.$refs["scrolly-wrapper"], {
        scrollY: true,
        probeType: 3,
        pullUpLoad: true
      })

      this.scrollY.on("pullingUp", () => this.getMorecominglist())
    },

    /**
     * 即将上映的翻页数据
     */
    async getMorecominglist() {
      if (this.cominglist.reachEnd) {
        Toast({
          message: "没有更多的数据了",
          position: "bottom",
          duration: 3000
        })
        this.scrollY.finishPullUp()
        return
      }
      Indicator.open()
      this.cominglist.start += this.cominglist.limit
      let start = this.cominglist.start
      let end = this.cominglist.start + this.cominglist.limit
      let rs = await moreComingList({
        ci: this.cominglist.ci,
        token: "",
        limit: this.cominglist.limit,
        movieIds: this.cominglist.movieIds.slice(start, end).join(",")
      })
      this.cominglist.coming.push(...rs.data.coming)

      if (rs.data.coming.length < this.cominglist.limit) {
        this.cominglist.reachEnd = true
      }

      this.$nextTick(() => {
        this.scrollY.finishPullUp()
        this.scrollY.refresh()
        Indicator.close()
      })
    }
  },
   activated(){
    console.log('comingsoon activated ...')
  },
  deactivated(){
     console.log('comingsoon deactivated ...')
  }
}
</script>

<style lang="scss" scoped>
.scrolly-wrapper {
  flex: 1;
  overflow: hidden;
}
.expect {
  display: flex;
}
</style>


